<!DOCTYPE HTML>
<html>
<head>
  <title>部落帖子管理</title>
  <link rel="stylesheet" href="/stylesheets/style.css">
  <script src="/scripts/jquery.min.js"></script>
  <script src="/scripts/boot.js" type="text/javascript"></script>
  <link rel="stylesheet" href="/scripts/miniui/themes/default/miniui.css">
  <link rel="stylesheet" href="/scripts/miniui/themes/icons.css">
  <link rel="stylesheet" href="/scripts/miniui/themes/bootstrap/skin.css">
  <link rel="stylesheet" href="/editor/common.css">
  <script src="/scripts/miniui/miniui.js"></script>
</head>
<body  style="padding: 0;width: 100%;height: 98%">
<!--<div class="mini-splitter" style="width:100%;height:100%;">-->
<!--</div>-->
<div style="width:100%;height: 97%;">
  <div id="outImg">
    <img id="imgId" src="" alt="" onclick="smallImg()">
  </div>
  <div style="padding: 5px">
    <span>帖子ID：</span><input  class="mini-textbox" type="text" id="objectId"/>
    <span>所属部落ID：</span><input  class="mini-textbox" type="text" id="tribeOId"/>
    <span>所属部落名称：</span><input  class="mini-textbox" type="text" id="tribeName"/>
    <span>创建人ID：</span><input  class="mini-textbox" type="text" id="creater"/>
    <span>创建人：</span><input  class="mini-textbox" type="text" id="nickName"/>
    <br/>
    <span>帖子内容：</span><input  class="mini-textbox" type="text" id="threadContent"/>
    <span>帖子状态：</span><input  class="mini-combobox" type="text" id="status" value="2" data="threadStatus"/>

    <input style="margin-right: 30px" type="button" value="查找" onclick="search()"/>
  </div>
  <div style="width:100%;">
    <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
      <table style="width:100%;">
        <tr>
          <td style="width:100%;">
            <a class="mini-button" iconCls="icon-remove" onclick="remove()">全部删除</a>
            <a class="mini-button" iconCls="icon-remove" onclick="del()">删除无效帖子</a>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <div id="datagrid1" class="mini-datagrid" style="width:99%;height: 96%;"  multiSelect="true"
       url="/tribeRoute/tribeThreadMG" idField="id" allowResize="true" onshowrowdetail="onShowRowDetail"
       sizeList="[20,30,50,100]" pageSize="20"
  >
    <!--allowCellEdit="true" allowCellSelect="true" multiSelect="true"-->
    <div property="columns">
      <div type="checkcolumn" ></div>
      <div type="expandcolumn" >#</div>
      <div field="objectId" width="80" align="center" headerAlign="center">帖子ID
        <input property="editor" class="mini-textbox" />
      </div>
      <div field="fromTribe" width="40" align="center" headerAlign="center">原部落ID</div>
      <div field="fromCreater" width="40" align="center" headerAlign="center">原作者ID</div>
      <div field="fromThread" width="40" align="center" headerAlign="center">原帖ID</div>
      <div field="tribeOId" width="80" align="center" headerAlign="center">所属部落ID</div>
      <div field="tribeName" width="80" align="center" headerAlign="center">所属部落名</div>
      <div field="creater" width="80" align="center" headerAlign="center">创建人ID</div>
      <div field="nickName" width="80" align="center" headerAlign="center">创建人</div>
      <div field="content" width="50" align="center" headerAlign="center">内容</div>
      <div field="status" width="50" align="center" headerAlign="center">帖子状态</div>
      <div field="isShare" width="40" align="center" headerAlign="center">能否分享</div>
      <div field="isTiming" width="40" align="center" headerAlign="center">定时发送</div>
      <div field="postNum" width="40" align="center" headerAlign="center">回复数量</div>
      <div field="enjoyNum" width="40" align="center" headerAlign="center">点赞数量</div>
      <div field="surfacePic" width="0" align="center" headerAlign="center">封面图像</div>
      <div field="threadUrl" width="40" align="center" headerAlign="center">网页链接</div>
      <div field="sortTime" width="80" align="center" headerAlign="center">排序时间</div>
      <div field="picArray" width="0" align="center" headerAlign="center"></div>
      <!--<div field="picArrayB" width="0" align="center" headerAlign="center"></div>-->
      <div field="streamId" width="0" align="center" headerAlign="center"></div>
      <div field="audioUrl" width="0" align="center" headerAlign="center"></div>
      <div field="mediaUrl" width="0" align="center" headerAlign="center"></div>
      <div field="createdAt" width="40" align="center" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss">创建日期</div>
      <div field="updatedAt" width="40" align="center" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss">更新日期</div>
    </div>
  </div>
  <div id="editForm1" style="display:none;">
    <div  class="mini-tabs" style="width:100%;" activeIndex="0">
      <div title="帖子信息">
        <input class="mini-hidden" name="objectId"/>
        <table style="width:100%;">
          <tr style="height: 50px; text-align: left;">
            <td style="width:150px;">帖子状态：<input name="status" class="mini-combobox" type="text" id="status" data="threadStatus"/></td>
          </tr>
          <tr style="height: 50px">
            <td style="width:150px;">能否分享：<input name="isShare" class="mini-combobox" type="text" id="isShare" data="threadIsShare"/></td>
          </tr>
          <tr style="height: 50px">
            <td>帖子内容：<textarea style="width: 95%; height: 400px;" name="content" class="mini-textarea"></textarea></td>
          </tr>
        </table>
      </div>
      <div title="帖子资源">
        <!--<input class="mini-hidden" name="objectId"/>-->
        <table style="width:100%;">
          <tr style="height: 50px">
            <td style="width:150px;">帖子图片：<div id="picArray" style="display: inline-block;"></div></td>
          </tr>
          <tr style="height: 50px">
            <td style="width:150px;">帖子音频：<div id="audio" style="display: inline-block;"></div><button onclick="addAudio()">添加音频</button></td>
          </tr>
          <tr style="height: 50px">
            <td style="width:150px;">帖子视频：<div id="media" style="display: inline-block;"></div><button onclick="addMedia()">添加视频</button></td>
          </tr>
        </table>
      </div>
    </div>
    <div style="text-align:left;padding-top:5px;padding-left:40px;" colspan="6">
      <a class="Update_Button" href="javascript:updateRow();">提交</a>
      <a class="Cancel_Button" href="javascript:cancelRow();">取消</a>
    </div>
  </div>
</div>
</body>

<script type="text/javascript">
  var threadStatus = [{ id: -1, text: '删除' },{ id: 0, text: '关闭' },{ id: 1, text: '开启' },{ id: 2, text: ' ' }];
  var threadIsShare = [{ id: 0, text: '否' },{ id: 1, text: '是' }];
  var flag = 1;
  var picArray = [];
  var picArrayB = [];
  mini.parse();
  var editForm = document.getElementById("editForm1");
  var grid = mini.get("datagrid1");
  grid.load({'status':1});
  grid.on("drawcell", function (e) {
    var value = e.value;
    var column = e.column;
    if (column.field == "status") {
      parseInt(value)
      if(value == -1) {
        e.cellHtml = '<text>删除</text>';
      }else if(value == 0) {
        e.cellHtml = '<text>关闭</text>';
      }else if(value == 1) {
        e.cellHtml = '<text>开启</text>';
      }
    } else if (column.field == "isShare") {
      parseInt(value)
      if(value == 0) {
        e.cellHtml = '<text>否</text>';
      }else if(value == 1) {
        e.cellHtml = '<text>是</text>';
      }
    }else if (column.field == "isTiming") {
      parseInt(value)
      if(value == 0) {
        e.cellHtml = '<text>否</text>';
      }else if(value == 1) {
        e.cellHtml = '<text>是</text>';
      }
    };
    if (column.field == "surfacePic") {
      if(value) {
        var imageUrl = "http://tribemedia.aladada.com/"+value+"?imageMogr2/thumbnail/30x30";
        e.cellHtml = '<img class="bigImg" onclick="bigImg()" src="'+imageUrl+'" width="30" height="30" alt="图片">';
      }else{
        e.cellHtml = '<img class="bigImg" onclick="bigImg()" src="http://7xiuo5.com1.z0.glb.clouddn.com/fgImage.png?imageMogr2/auto-orient/thumbnail/!100x100r/gravity/Center/crop/100x100/quality/80/auto-orient" width="30" height="30" alt="图片">';
      }
    }
    if (column.field == "threadUrl") {
      if(value) {
//        console.log(value);
        e.cellHtml = '<a href="'+value+'" target="view_window" >网页查看</a>';
      }
    }
  });
  function bigImg() {
    var row = grid.getSelected();
    if (row) {
      if(flag==1) {
        if(row.surfacePic){
          var imagePath = "http://tribemedia.aladada.com/"+row.surfacePic;
          $("#imgId").attr('src', imagePath);
          $("#outImg").css('display','block');
        } else {
         alert('没有图片!');
        }
      }
    }
  };
  function smallImg() {
    $("#outImg").css('display','none');
  };
  function search() {
    $('#picArray').empty();
//    $('.picArrayB').empty();
    $('#audio').empty();
    $('#media').empty();
    var objectId = mini.get("objectId").getValue();
    var tribeOId = mini.get("tribeOId").getValue();
    var tribeName = mini.get("tribeName").getValue();
    var creater = mini.get("creater").getValue();
    var nickName = mini.get("nickName").getValue();
    var status = mini.get("status").getValue();
    var threadContent = mini.get("threadContent").getValue();
    if (objectId=="" && tribeOId=="" && tribeName=="" && creater=="" && nickName=="" && threadContent=="" && status=="") {
      alert('请输入查询条件！')
    } else {
      grid.load({
        objectId: objectId,
        tribeOId:tribeOId,
        tribeName:tribeName,
        creater:creater,
        nickName:nickName,
        threadContent:threadContent,
        status:status,
      });
    }
  }
  $("#objectId,#tribeOId,#tribeName,#creater,#nickName,#threadContent,#status").bind("keydown", function (e) {
    if (e.keyCode == 13) {
      search();
    }
  });
  function onShowRowDetail(e) {
    $('#picArray').empty();
//    $('.picArrayB').empty();
    $('#audio').empty();
    $('#media').empty();
    var row = e.record;
    if(row.picArray){
      picArray = [];
      picArray = arrayHandle(row.picArray);
    } else {
      picArray = [];
    }
//    if(row.picArrayB){
//      picArrayB = [];
//      picArrayB = arrayHandle(row.picArrayB);
//    } else {
//      picArrayB = [];
//    }
//    //将editForm元素，加入行详细单元格内
    var td = grid.getRowDetailCellEl(row);
    td.appendChild(editForm);
    editForm.style.display = "";

    //表单加载员工信息
    var form = new mini.Form("editForm1");
    mini.getbyName("objectId").setValue(row.objectId);
    mini.getbyName("content").setValue(row.content);
    mini.getbyName("status").setValue(row.status);
    mini.getbyName("isShare").setValue(row.isShare);
//    console.log(row.streamId);
    if(row.audioUrl != ""){
        $('#audio').empty();
      $('#audio').append('<a href="'+row.audioUrl+'" target="view_window" >打开音频</a>');
    } else {
      if(row.streamId != undefined){
        $('#audio').append('<a onclick="showAudio()">播放音频</a>');
      }
//      else {
//        $('#audio').append('<div>没有音频</div>');
//      }

    }
//    console.log(row.mediaUrl)
    if(row.mediaUrl != ""){
        $('#media').empty();
      $('#media').append('<a href="'+row.mediaUrl+'" target="view_window" >打开视频</a>');
    }
//    else {
//      $('#media').append('<div>没有视频</div>');
//    }
    if (picArray.length != 0){
      for(var i=0;i<picArray.length;i++){
          $('#picArray').empty();
        $('#picArray').append('<img style="margin-right: 10px;" class="bigImgArray" onclick="bigImgArray(this)" src="'+picArray[i]+'" width="50" height="50" alt="图片">');
      }
    } else {
        $('#picArray').empty();
      $('#picArray').append('<div>没有图片</div>');
    }
//    if (picArrayB.length == 0){
//      $('.picArrayB').append('<div>没有图片</div>');
//    } else {
//      for(var i=0;i<picArrayB.length;i++){
//        $('.picArrayB').append('<img style="margin-right: 10px;" class="bigImgArray" onclick="bigImgArray(this)" src="'+picArrayB[i]+'" width="50" height="50" alt="图片">');
//      }
//    }
  };

  //添加音频
  function addAudio() {
      let row = grid.getSelected();
      let objectId = row.objectId;
      mini.open({
          url: "/tribeRoute/addAudio?objectId=" + objectId,
          title: "添加音频", width: 650, height: 400,
          ondestroy:function (action) {
              grid.reload();
          }
      });
  }
  //添加视频
  function addMedia() {
      let row = grid.getSelected();
      let objectId = row.objectId;
      mini.open({
          url: "/tribeRoute/addMedia?objectId=" + objectId,
          title: "添加视频", width: 650, height: 400,
          ondestroy:function (action) {
              grid.reload();
          }
      });
  }

  function showAudio() {
    var row = grid.getSelected();
    var streamId = row.streamId;
//    console.log(streamId);
    mini.open({
      url: "/tribeRoute/tribeThreadPlayer?&objectId="+streamId,
      title: "播放音频", width: 420, height: 100,

      ondestroy: function (action) {

        grid.reload();

      }
    });
  }
  function bigImgArray(e) {
//    console.log(e.src);
    var imagePath = e.src;
    $("#imgId").attr('src', imagePath);
    $("#outImg").css('display','block');
//    var row = grid.getSelected();
//    if (row) {
//      if(flag==1) {
//        if(row.surfacePic){
//          var imagePath = "http://tribemedia.aladada.com/"+row.surfacePic;
//          $("#imgId").attr('src', imagePath);
//          $("#outImg").css('display','block');
//        } else {
//          alert('没有图片!');
//        }
//      }
//    }
  };
  function arrayHandle(array) {
    var tempArray = [];
    for(var i=0;i<array.length;i++){
      var imageUrl = "http://tribemedia.aladada.com/"+array[i].name;
      tempArray.push(imageUrl);
    };
    return tempArray;
  }
  function cancelRow() {
    grid.reload();
  }

  function updateRow() {
    var form = new mini.Form("editForm1");
    var data = form.getData();
    grid.loading("保存中，请稍后......");
//    var json = mini.encode(data);
    $.ajax({
      url: "/tribeRoute/tribeThreadUpdate",
      type:'POST',
      data: data,
      success: function (result) {
        alert(result);
        grid.reload();
      },
      error: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
      }
    });

  }
  function remove() {
      var rows = grid.getSelecteds();
      if (rows.length > 0) {
          if (confirm("确定删除选中记录？")) {
              var ids = [];
              for (var i = 0, l = rows.length; i < l; i++) {
                  var r = rows[i];
                  var objectId = r.objectId.replace("\"","");
                  ids.push(objectId);
              }
              var id = ids.join('-');
              grid.loading("操作中，请稍后......");
              $.ajax({
                  url: "/tribeRoute/tribeThread/delete" ,
                  type:"POST",
                  data:{id:id},
                  success: function (result) {
                    if (result) {
                      grid.reload();
                    } else {
                      alert('删除失败，请刷新重试！')
                    }
                  }
              });
          }
      } else {
          alert("请选中一条记录");
      }
  }
  function del() {
    $.ajax({
      url: "/tribeRoute/tribeThread/deleteIneffectiveness" ,
      type:"POST",
      data:{id:id},
      success: function (text) {
        grid.reload();
      },
      error: function () {
      }
    });
  }
</script>
</html>